<template>
  <div class="flex-1 flex-ver">
    <el-table ref="table" :data="tableData" class="flex-1" height="100%" size="medium" border highlight-current-row
      v-loading="tableLoading" stripe>
      <el-table-column align="center" label="一级指标" width="180" fixed>
        <el-table-column align="center" label="二级指标">
          <el-table-column align="center" show-overflow-tooltip prop="discipline.name" width="180">
            <template slot="header">
              <div class="header_cell">
                <p class="header_cell--block header_cell--left">学科</p>
                <p class="header_cell--line"></p>
                <p class="header_cell--block header_cell--right">三级指标</p>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="year" label="年度" width="100">
      </el-table-column>
      <slot name="one"> </slot>
      <template>
        <column-item v-for="item in col" :key="item.prop" :col="item"></column-item>
      </template>
      <slot> </slot>
      <el-table-column v-if="operation" align="center" label="操作" width="90" #default="scope">
        <el-tooltip effect="dark" content="评分" placement="bottom-end">
          <el-button v-if="scope.row.score" size="small" @click="handle(scope.row)" icon="el-icon-edit" circle>
          </el-button>
        </el-tooltip>
      </el-table-column>

    </el-table>
    <Pagination v-bind="$attrs" v-on="$listeners"></Pagination>
  </div>
</template>

<script>
  import columnItem from './columnItem'
  export default {
    components: {
      columnItem
    },
    props: {
      col: {
        default: () => ([])
      },
      tableData: {
        default: () => ([])
      },
      tableLoading: {
        default: false
      },
      operation:{
        default: true
      }
    },
    // updated(){
    //   console.log(11)
    //   this.$refs.table.doLayout()
    // },
    methods: {
      handle(value) {
        this.$emit('handle', value)
      },
      // @sort-change="tableSortChange"
      // tableSortChange(column) {
      //   if (column.order === "descending") {
      //     this.pageparm.sort_str = column.prop;
      //     this.pageparm.sort_order = "desc";
      //   } else if (column.order === "ascending") {
      //     this.pageparm.sort_str = column.prop;
      //     this.pageparm.sort_order = "asc";
      //   } else {
      //     this.pageparm.sort_str = null;
      //     this.pageparm.sort_order = null;
      //   }
      //   this.getList()
      // },
    }
  }
</script>

<style lang='less' scoped>
  .header_cell {
    position: relative;
    height: 50px;
  }

  .header_cell--block {
    position: absolute;
  }

  .header_cell--left {
    left: 0;
    bottom: 0;
  }

  .header_cell--right {
    right: 0;
    top: 0;
  }

  .header_cell--line {
    width: 168px;
    height: 1px;
    background: #DCDFE6;
    top: 0;
    left: 0;
    transform: rotate(17deg);
    transform-origin: left top;
  }
</style>